<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!--  包含所有表单元素 表单标签  action提交表单的服务器地址-->
   <!-- br强制换行显示 
         hr分割线
         label文本标签 选中文字也可以让表单聚焦-->

   <form action="xxx.php" method="get">
      <!-- 明文输入框 -->
      <!-- 当前表单不可写 redonly -->
      <!-- 设置表单禁用 disabled -->
      姓名：<input type="text" readonly><br>
      <hr>
      <!-- 暗文输入框 -->
      密码：<input type="password" disabled><br>
      <!-- 单选按钮 
         设置同一个name 可以互斥-->
      性别：
      <label>
         男：<input type="radio" name="gender" value="male">
      </label>
      <label for="female">
         <!-- checked设置默认选中 -->
         女：<input checked id="female" type="radio" name="gender" value="female">
      </label><br>
      <!--  -->
      爱好：
      游泳<input type="checkbox" name="hobbies" value="swimming">
      唱歌<input type="checkbox" name="hobbies" value="singing">
      篮球<input type="checkbox" name="hobbies" value="basketball">
      <hr>
      <!-- 下拉框 下拉选择器 -->
      <select name="city">
         
         <optgroup label="一线城市">
            <option value="yancheng">盐城</option>
            <option value="kunshan">昆山</option>
            <option value="zhejiang">浙江</option>
         </optgroup>
         <optgroup label="二线城市">
            <option value="beijing">北京</option>
            <option value="shnaghai">上海</option>
            <option value="guangzhou">广州</option>
         </optgroup>
      <!-- 多行文本框 -->
       <textarea></textarea>
       <!-- 其它表单元素 -->
       <!--进度条  -->
       <progress value="70">70%</progress>
      <!-- 滑块 -->
       <input type="range" min="0"max="100"step="7">
       <!--时间日期 选择器 -->
       <input type="datetime-local" name="" id="">
       <input type="date" nanme=""id="">
       <!-- 校验邮箱格式 -->
       <input type="email" name="" id="">
       <!-- 颜色拾取器 -->
        <input type="color">
        <!-- 网址校验 -->
        <input type="url">
        <!-- 提交按钮 -->
        <input type="submit">
      </select>
   </form>
</body>

</html>